<template>
    <div class="wrapper">
        <!-- 轮播组件 -->
        <Swiper :bannerImg="bannerImg"></Swiper>
        <!-- kinds组件 -->
        <kinds>
            <!-- kinds-item组件 -->
            <kinds-item img="/img/01.png" text="特色課"></kinds-item>
            <kinds-item img="/img/02.png" text="一对一辅导"></kinds-item>
            <kinds-item img="/img/03.png" text="学习日历"></kinds-item>
        </kinds>
        <div style="margin:130px 0 0 0"></div>
        <!-- 内容组件 -->
        <index-cont :listData="listData" @addDetail="addDetail" @CourseFn="CourseFn"></index-cont>
        <div id="drag" class="jdktma" v-hulr @click="toFn">
            <van-icon size="30px" color="#fff" name="envelop-o" />
        </div>
    </div>
</template>
   
<script>
import { getBannerPort, getListDataPort } from '@/api/index'
import Swiper from '@/components/Swiper'
import kinds from '@/components/kinds/index.vue'
import kindsItem from '@/components/kinds/kinds-item.vue'
import indexCont from '@/components/index-cont.vue'
export default {
    name: "index",
    data() {
        return {
            bannerImg: [],
            listData: [],
            show: false,
        }
    },
    computed: {},
    created() {
        this.gettBanner()
        this.gettListData()
    },
    mounted() {
       
    },
    watch: {},
    methods: {
        // 获取轮播数据
        async gettBanner() {
            let res = await getBannerPort()
            // console.log(res)
            this.bannerImg = res.data
        },
        // 获取列表数据
        async gettListData() {
            let res = await getListDataPort()
            this.listData = res.data
        },
        // 点击跳转详情
        addDetail(item) {
            let token = localStorage.getItem('token')
            console.log(token);
            console.log(item)
            let iid = item.teacher_id
            this.$router.push(`/teacher-detail?id=${iid}`)
        },
        //点击跳转课程
        CourseFn(item) {
            let iid = item.id
            console.log(iid);
            this.$router.push(`/course-detail?id=${iid}`)
        },
        moveFn(e) {
            e.preventDefault()
            let x = e.touches[0].clientX
            let y = e.touches[0].clientY

            if (x > 50 && x < document.body.clientWidth - 50 && y > 50 && y < document.body.clientHeight - 100) {
                let drag = document.getElementById("drag")
                drag.style.top = y - 50 + 'px'
                drag.style.left = x - 50 + 'px'
            }
        },
        toFn() {

        }
    },
    directives: {
        hulr(el) {
            var maxW = document.documentElement.clientWidth;
            var maxH = document.documentElement.clientHeight;
            var startX = 0;
            var startY = 0;
            el.addEventListener("touchstart", function (e) {
                e.preventDefault()
                e.stopPropagation()
                startX = e.targetTouches[0].pageX - this.offsetLeft;
                startY = e.targetTouches[0].pageY - this.offsetTop;
            }, false);
            el.addEventListener("touchmove", function (e) {
                e.stopPropagation()
                e.preventDefault()
                var leftX = e.targetTouches[0].pageX - startX;
                var topY = e.targetTouches[0].pageY - startY;
                var thisW = e.targetTouches[0].target.clientWidth;
                var parentW = e.targetTouches[0].target.offsetParent.clientWidth;
                var thisH = e.targetTouches[0].target.clientHeight;
                var parentH = e.targetTouches[0].target.offsetParent.clientHeight;

                this.style.left = leftX + "px";
                this.style.top = topY + "px";
            }, false);
            el.addEventListener("touchend", function (e) { }, false);
        },
    },

    components: {
        Swiper,
        kinds,
        kindsItem,
        indexCont
    }
}
</script>
  
<style lang="scss" scoped>
.van-toast {
    width: 50%;
    font-size: 20px;
}

.wrapper {
    width: 100%;
    position: relative;
    background: #f4f4f4;
    margin-bottom: 50px;
    box-sizing: border-box;
}

.jdktma {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #007aff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 75px;
    right: 15px;
}
</style>
  